$(function () {
    //console.log(box.id)
    var fileArr=[]  //存放图片内容的数组，提交数据到后台时用
    $("#btn_add").click(function () {
        //console.log('dddd');
        $("#fileDrag").click();
    });

    //禁止浏览器打开文件行为
    document.addEventListener("drop", function (e) {  //拖离
        e.preventDefault();
    });
    document.addEventListener("dragleave", function (e) {  //拖后放
        e.preventDefault();
    });
    document.addEventListener("dragenter", function (e) {  //拖进
        e.preventDefault();
    });
    document.addEventListener("dragover", function (e) {  //拖来拖去
        e.preventDefault();
    });

    var box = document.getElementById("drop_area");   //获取拖拽区域
    $(box).on("dragover",function () {
        this.style.borderColor="#FF3366";
    });
    $(box).on("dragleave",function () {
        this.style.borderColor="#0099FF";
    });

    //添加附件时
    $("#fileDrag").change(function () {
        var imgObj=$(this)[0];
        var fileList=imgObj.files;
        //console.log(fileList.length);
        addFile(fileList);
    });

    //拖入时
    box.addEventListener("drop", function (e) {
        //console.log('拖动了');
        this.style.borderColor="#0099FF";
        var fileList = e.dataTransfer.files; //获取文件对象
        addFile(fileList);
    });

    //从拖入框以及file控件中添加文件
    function addFile(fileList) {
        var lenth=fileList.length;
        if (!fileList || lenth == 0) {
            return;
        };
        //console.log(fileList);
        for (var i=0;i<lenth;i++){
            var imgfile=null;
            imgfile=fileList[i];
            if (imgfile.type.indexOf('image')===-1){
                console.log("拖入的不是图片");
                continue;
            };

            var img=getObjectURL(imgfile);
            //console.log(img);
            var filename=imgfile.name;
            var filesize=Math.floor(imgfile.size/1024/1024);
            if (filesize>3){
                alert("上传的单个文件大小不能超过3M。");
                continue;
            }
            for(imgF in fileArr){
                if (imgF===imgfile){
                    console.log("已经存在该图片");
                    return;
                }
            };
            if (fileArr.length===10){
                alert("最多只能上传10张图片！");
                return;
            }

            fileArr.push(imgfile);
            appendFile(img,"#preview");
        };
    };

    //生成文件的URL
    function getObjectURL(file) {
        var url=null;
        if (window.createObjectURL != undefined) {//basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) {//mozilla(firefox)兼容火狐
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {//webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    };

    //动态添加图片的html
    function appendFile(image,classId) {
        var imgHtml=null;
        imgHtml='<div class="pre_img">';
        imgHtml+='    <img class="up_img" src="'+image+'">';
        imgHtml+='    <div class="ovrly"></div>';
        imgHtml+='    <div class="buttons">';
        imgHtml+='        <a id="delImg" class="fa fa-trash" title="删除"></a>';
        imgHtml+='        <a id="viewImg" class="fa fa-search" title="查看"></a>';
        imgHtml+='    </div> ';
        imgHtml+='</div>';
        $(classId).append(imgHtml);
    };

    //删除图片
    $(document).on("click","#delImg",function () {
        //console.log("click");
        var _this=$(this);
        var index=_this.parent().parent().index();
        //console.log(index);
        fileArr.splice(index,1);
        console.log(fileArr);
        //console.log(_this.parents(".pre_img"))
        _this.parents(".pre_img").remove();
    });
    //点击查看图片时
    $(document).on("click","#viewImg",function () {
        var _this=$(this).parents(".pre_img").children(".up_img");
        //console.log(_this.attr("src"));
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    });

    //弹出框并显示大图
    function imgShow(outerdiv,innerdiv,bigimg,_this) {
        var src=_this.attr("src");  //获取点击的图片的地址
        $("#bigimg").attr("src",src);       //设置bigimg标签的src值

        $("<img/>").attr("src",src).load(function () {
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });
    };

    //再次点击淡出消失弹出层
    $(outerdiv).click(function(){
        $(this).fadeOut("fast");
    });
});